
/** &代表的是父选择器 */
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

/** 属性嵌套 */
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

/**变量*/
$width: 5em;
#main {
  width: $width;
}

/**!global定义为全局变量*/
#main {
  $width: 5em !global;
  width: $width;
}

/**!default定义的变量如果有值将不做处理，没有值时将覆盖原变量*/
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

#sidebar {
  width: $width;
}

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header")


/**运算*/
/**
  加号左侧有引号，则结果带引号，反之无引号
  通过#{}作为动态值
  布尔运算支持 and or not
  
  */
p {
  width: 10px + 10px;
  cursor: e + -resize;
  content: "Foo " + Bar;
  font-family: sans- + "serif";
  content: "I ate #{5 + 10} pies!";
  content: "I ate #{$width} pies!";
  color: true and true or true and not true;
  width: 1em + (2em * 3);
}

p {
  font: 10px/8px;
  $width: 1000px;
  width: $width/2;
  width: round(1.5)/2;
  height: (500px/2);
  margin-left: 5px + 8px/2px;
}

p {
  color: #010203 + #040506;
}

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  /** 加0.3 */
  color: opacify($translucent-red, 0.3);
  /** 替换a */
  background-color: transparentize($translucent-red, 0.25);
}

$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}

/**函数*/
p{
  /**色彩模式HSL*/
  color: hsl(0, 100%, 50%);
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

/**import 导入*/
@import "foo";  //单个导入
@import "rounded-corners", "text-shadow"; // 多个导入
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}"); // 插值导入 unquote($string)：删除字符串中的引号；
#main {
  @import "example"; // 嵌套引入
}

// 媒体查询
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

// 样式继承

.error {
  border: 1px #f00;
  background-color: #fdd;
}
// intrusion 同样也会被继承
.error .intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

// 伪类继承
a:hover {
  text-decoration: underline;
}

.hoverlink {
  @extend a;
}

// 多重延伸 .error和.attention的子元素为seriousError会继承
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

// 继续延伸
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

.notice {
  @extend %extreme;
}

// ```!optional``` 失败会收到错误提示
a.important {
  @extend .notice !optional;    
}

// 分支判断
p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

// 循环
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

// 混合     @mixin定义        @include引入
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

// 混合模式 入参决定结果
@mixin sexy-border($color, $width: 1px) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

// 通过...将其视为列表处理
@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

// @mixin 可以用 = 表示，而 @include 可以用 + 表示
=apply-to-ie6-only
  * html
    @content

+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)


$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  // 5 * 40 + 4 * 10 = 240
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

